<template>
  <div>
    <table border="1" style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr>
          <th>ID</th>
          <th>Target Name</th>
          <th>Target Level</th>
          <th>Target Unit</th>
          <th>Belong Unit</th>
          <th>Unit Number</th>
          <th>Target Type</th>
          <th>Level Number</th>
          <th>Target Level Detail</th>
          <th>Target Unit Detail</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in reportTargets" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.target_name }}</td>
          <td>{{ item.target_level }}</td>
          <td>{{ item.target_unit }}</td>
          <td>{{ item.belong_unit }}</td>
          <td>{{ item.unit_number }}</td>
          <td>{{ item.target_type }}</td>
          <td>{{ item.level_number }}</td>
          <td>{{ item.target_level_detail }}</td>
          <td>{{ item.target_unit_detail }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      reportTargets: []
    };
  },
  created() {
    this.fetchReportTargets();
  },
  methods: {
    async fetchReportTargets() {
      try {
        const response = await axios.get('http://127.0.0.1:8000/api/ReportTarget/'); // 替换为实际的 API 地址
        this.reportTargets = response.data.results;
        console.log('Report Targets:', this.reportTargets);
      } catch (error) {
        console.error('There was an error fetching the report targets!', error);
      }
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
  text-align: left;
}
</style>
